<template>
	<div class="like">
		<div class="like-top">
			<div class="like-left">
				<img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt=""><span>猜你喜欢</span>
			</div>
		</div>
		<ul class="likelist">
			<li v-for="item in likeList">
				<div class="likelist-left">
					<img :src="item.imgUrl" alt="">
				</div>
				<div class="likelist-right">
					<p class="likelist-name">{{ item.title }}</p>
					<span class="comment">{{ item.comment }}条评论</span>
					<p>
						<span>￥</span><span class="likelist-price">{{ item.price }}</span>起
						<span class="likelist-city">{{ item.adress }}</span>
					</p>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
	export default{
		props:["likeList"],
		data(){
			return{
				// "likeList":[
	   //          {
	   //            "id":"01",
	   //            "title":"华清爱琴海温泉",
	   //            "price":"198",
	   //            "adress":"临潼区",
	   //            "imgUrl":"http://img1.qunarzz.com/sight/p0/1511/57/57a1490e1b72901a90.img.jpg_200x200_84df18bd.jpg",
	   //            "comment":"808"
	   //          },
	   //          {
	   //            "id":"02",
	   //            "title":"华清宫",
	   //            "price":"108",
	   //            "adress":"临潼区",
	   //            "imgUrl":"http://img1.qunarzz.com/sight/p0/1602/53/53cf6caed9f9b9ee90.img.jpg_200x200_f5476a84.jpg",
	   //            "comment":"39803"
	   //          },
	   //          {
	   //            "id":"03",
	   //            "title":"长恨歌",
	   //            "price":"223",
	   //            "adress":"华清宫",
	   //            "imgUrl":"http://img1.qunarzz.com/sight/p0/1505/18/18ffcca94b1b7ca2.water.jpg_200x200_9b0d2dc4.jpg",
	   //            "comment":"18914"
	   //          },
	   //          {
	   //            "id":"04",
	   //            "title":"秦岭野生动物园",
	   //            "price":"48",
	   //            "adress":"长安区",
	   //            "imgUrl":"http://img1.qunarzz.com/sight/p0/1508/c5/a017645d82ab89f271fdfb1bd6ecc2e0.water.jpg_200x200_2de772de.jpg",
	   //            "comment":"12353"
	   //          },
	   //          {
	   //            "id":"05",
	   //            "title":"秦始皇陵博物院（兵马俑）",
	   //            "price":"120",
	   //            "adress":"临潼区",
	   //            "imgUrl":"http://img1.qunarzz.com/sight/p0/1411/1a/5582f9f24bc50b475a8cbda4c5ac8d24.water.jpg_200x200_a0d48950.jpg",
	   //            "comment":"123456"
	   //          },
	   //          {
	   //            "id":"06",
	   //            "title":"西安临潼悦椿温泉",
	   //            "price":"198",
	   //            "adress":"临潼区",
	   //            "imgUrl":"http://img1.qunarzz.com/sight/p0/1511/a3/a3939e44477746c490.img.jpg_200x200_327e7822.jpg",
	   //            "comment":"1084"
	   //          },
	   //          {
	   //            "id":"07",
	   //            "title":"白鹿原影视城",
	   //            "price":"59",
	   //            "adress":"蓝田县",
	   //            "imgUrl":"http://img1.qunarzz.com/sight/p0/1610/2d/2d6480f93f464e0a3.img.jpg_200x200_51908dc5.jpg",
	   //            "comment":"834"
	   //          },
	   //          {
	   //            "id":"08",
	   //            "title":"太平国家森林公园",
	   //            "price":"55.5",
	   //            "adress":"户县",
	   //            "imgUrl":"http://img1.qunarzz.com/sight/p0/1704/ce/ce94da0668b60b50a3.img.jpg_200x200_e6fbda21.jpg",
	   //            "comment":"795"
	   //          },
	   //          {
	   //            "id":"09",
	   //            "title":"大唐芙蓉园",
	   //            "price":"107",
	   //            "adress":"雁塔区",
	   //            "imgUrl":"http://img1.qunarzz.com/sight/p0/1508/db/dbd0bef45fbc36b3.img.jpg_200x200_1b88abcf.jpg",
	   //            "comment":"28940"
	   //          },
	   //          {
	   //            "id":"10",
	   //            "title":"陕西历史博物馆",
	   //            "price":"30",
	   //            "adress":"雁塔区",
	   //            "imgUrl":"http://img1.qunarzz.com/sight/p0/1411/b8/f5fd5955bdecc923ce6d40ce453160eb.water.jpg_200x200_5032ab39.jpg",
	   //            "comment":"42820"
	   //          },
	   //          {
	   //            "id":"11",
	   //            "title":"中国唐苑",
	   //            "price":"45",
	   //            "adress":"雁塔区",
	   //            "imgUrl":"http://img1.qunarzz.com/sight/p0/1507/c4/21286eaf6ccc0df78b834a7db50f0e4a.water.jpg_200x200_3d42595d.jpg",
	   //            "comment":"253"
	   //          },
	   //          {
	   //            "id":"12",
	   //            "title":"西安植物园（曲江园区）",
	   //            "price":"9",
	   //            "adress":"雁塔区",
	   //            "imgUrl":"http://img1.qunarzz.com/sight/p32/201211/04/2c81a110fdbd36b793835fbb.jpg_200x200_4265150d.jpg",
	   //            "comment":"183"
	   //          },
	   //          {
	   //            "id":"13",
	   //            "title":"南五台",
	   //            "price":"40",
	   //            "adress":"终南山",
	   //            "imgUrl":"http://img1.qunarzz.com/sight/p0/201403/10/55275671bb48cf2103d155523f89df78.jpg_200x200_dc2e85c2.jpg",
	   //            "comment":"466"
	   //          },
	   //          {
	   //            "id":"14",
	   //            "title":"华夏文旅海洋公园",
	   //            "price":"8",
	   //            "adress":"西安",
	   //            "imgUrl":"http://img1.qunarzz.com/sight/p0/1804/51/512ff9f3a6e9b1a6a3.water.jpg_200x200_f7123f52.jpg",
	   //            "comment":"377"
	   //          },
	   //          {
	   //            "id":"15",
	   //            "title":"汤峪天潭温泉酒店",
	   //            "price":"145",
	   //            "adress":"蓝田县",
	   //            "imgUrl":"http://img1.qunarzz.com/sight/p0/1505/ca/ca758ff1d2c0d808.water.jpg_200x200_17c9e79c.jpg",
	   //            "comment":"244"
	   //          }
	   //        ]

			}
		}
	}
</script>
<style scoped>
	.like{
		background-color: #fff;
		margin-top: .2rem;	
	}
	.like-left{
		line-height: .28rem;
	}
	.like-left img{
		width: .3rem;
    	height: .3rem;
        margin-left: .2rem;
	}
	.like-left span{
		margin-left: .08rem;
	    color: #212121;
	    font-size: .32rem;
	}
	.likelist-left{
	    overflow: hidden;
	    width: 2rem;
	    height: 2rem;
	}
	.likelist-left img{
		width: 2rem;
	}
	.likelist-right{
		padding-left: .2rem;
		flex: 1;
	}
	.likelist li{
		overflow: hidden;
		padding:.2rem .2rem .2rem 0;
		margin-left: .2rem;
		border-bottom: 1px solid #e0e0e0;
		display:flex;
	}
	.likelist-right .likelist-name{
	    margin-top: .26rem;
	    height: .44rem;
	    color: #212121;
	    font-size: .32rem;
	    line-height: .44rem;
	}
	.likelist-right span{
		color: #616161;
	    font-size: .24rem;
	}
	.likelist-right p{
		color: #616161;
   		font-size: .24rem;
   		margin-top: .22rem;
	}
	.likelist-right .likelist-price{
		color: #ff8300;
		font-size: .4rem;
		
	}  
	.likelist-right p span{
		color: #ff8300;
		
	}
	.likelist-right .likelist-city{
		float: right;
		margin-top: .1rem;
		color:#616161;
	}
	.comment{
		display: block;
		margin-top: .14rem;
	}
</style>